import React from 'react';
import {
  Table,
  Alert,
  Divider,
  Modal,
} from 'antd';

import styles from './index.module.less';

export default class LogisticsSchedule extends React.Component {
  state = {
    scheduleData: [
      {
        key: 1,
        dealNo: '121212',
        orderNo: '123123123',
        number: 12,
        info: '测试商品',
        status: '待报价',
      },
    ],
  };

  handleCancel = (item, e) => {
    e.preventDefault();

    Modal.confirm({
      width: 550,
      title: '温馨提示',
      content: (
        <React.Fragment>
          <div>该条物流申请取消后，与该物流申请单相关联的报价单同步移除。</div>
          <div>若该订单需要物流服务需要再次填写信息重新申请，是否要取消申请？</div>
        </React.Fragment>
      ),
      okText: '确认',
      cancelText: '取消',
    });
  };

  handleDelete = (item, e) => {
    e.preventDefault();

    Modal.confirm({
      width: 550,
      title: '删除提示',
      content: '确认要删除这条记录嘛？',
      okText: '确认',
      cancelText: '取消',
    });
  };

  render() {
    const { scheduleData } = this.state;

    const tip = (
      <React.Fragment>
        <div>1.蜂收部落平台为您提供物流服务，您在退货或者交易时，如果需要物流服务，请在本页面选择适合您的服务。</div>
        <div>2.物流申请过程中如有任何问题，可以拨打我们的客服热线"<span className={styles.textLightOrange}>0571-5812354</span>"寻求帮助。</div>
        <div>3.您每次仅可申请一张订单或退货服务单的物流申请，当然，您可以创建多张申请单，创建成功后请耐心等待，承运方报价可能会持续一段时间。</div>
        <div>4.请认真填写申请单信息，以免承运方获取信息错误，导致货品不能及时运输，给您造成财产损失。</div>
      </React.Fragment>
    );

    const columns = [
      {
        key: 'dealNo',
        title: '申请单号',
        dataIndex: 'dealNo',
        className: styles.scheduleTableFirstTd,
        render: (text, record) => {
          return (
            <React.Fragment>
              <i className={`iconfont icon-yishouqing ${styles.icon}`}></i>{record.dealNo}
            </React.Fragment>
          );
        },
      },
      {
        key: 'orderNo',
        title: '订单号',
        dataIndex: 'orderNo',
      },
      {
        key: 'number',
        title: '数量（吨）',
        dataIndex: 'number',
      },
      {
        key: 'info',
        title: '货品信息',
        dataIndex: 'info',
      },
      {
        key: 'status',
        title: '状态',
        dataIndex: 'status',
      },
      {
        key: 'action',
        title: '操作',
        dataIndex: 'action',
        render: (text, record) => {
          return (
            <React.Fragment>
              <a href='#' className={styles.textLightOrange} onClick={this.handleCancel.bind(this, record)}>终止报价</a>
              <Divider type='vertical' />
              <a href='#' className={styles.textLightDark}>查看报价</a>
              <Divider type='vertical' />
              <a href='#' className={styles.textLightDark} onClick={this.handleDelete.bind(this, record)}>删除</a>
              <Divider type='vertical' />
              <a href='#' className={styles.textLightDark}>查看申请单详情</a>
            </React.Fragment>
          );
        },
      },
    ];

    return (
      <div className={styles.wrapperBox}>
        <div className={styles.logisticsScheduleBox}>
          <Alert
            className={styles.logisticsScheduleTipBox}
            message={<span className={styles.textLightBlue}>温馨提示：</span>}
            description={tip}
            type='info'
          />
          <Table
            title={() => '我的物流申请单'}
            bordered
            columns={columns}
            dataSource={scheduleData}
          />
        </div>
      </div>
    );
  }
}
